<template>
  <a-drawer :title="titleMap" :width="600" :visible.sync="visible"
    :body-style="{ 'padding-top': '0px', paddingBottom: '80px' }" @close="close">
    <a-form :form="form">
      <a-form-item :label="$t('user.verification-code.req12')">
        <a-input
          v-decorator="['YtAuthorityName', { rules: [{ required: true, message: $t('user.verification-code.req14') }] }]"
          :placeholder="$t('user.verification-code.req14')" />
      </a-form-item>
      <a-form-item :label="$t('user.verification-code.req13')">
        <a-input
          v-decorator="['YtAuthorityNameEn', { rules: [{ required: true, message: $t('user.verification-code.req15') }] }]"
          :placeholder="$t('user.verification-code.req15')" />
      </a-form-item>
      <a-form-item :label="$t('user.verification-code.required11156611019')">
        <a-select :placeholder="$t('user.verification-code.required1115661101911')" :disabled="disabled"
          v-decorator="['YtAuthorityFunction', { rules: [{ required: true, message: $t('user.verification-code.required111566110577363') }] }]">
          <a-select-option v-for="item in List" :value="item.value" :key="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <div
      class="absolute right-0 bottom-0 w-full border-t border-[#e9e9e9] px-4 py-[10px] bg-white text-left z-1 flex justify-center">
      <a-button :style="{ marginRight: '20px' }" class="w-[200px]" @click="close">{{ $t('user.email.required11')
      }}</a-button>
      <a-button :loading="loading" class="w-[200px]" type="primary" @click.native.prevent="submit()">
        <span v-if="!loading">{{ $t('app.setting.weakmode') }}</span>
        <span v-else>{{ $t('user.verification-code.required1115661107') }}...</span>
      </a-button>
    </div>
  </a-drawer>
</template>
  
<script>
import { authorityAdd, authorityUpState, authorityDropDown } from '@/api/index'
export default {
  data() {
    return {
      List: [],
      disabled: false,
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      titleMap: '',
      mode: 0,
      Id: 0,
    }
  },
  mounted() { },
  methods: {
    /**
     *
     * @param {*} type 0 新增
     * @param {*} data 1 修改
     */
    async open(mode = 0, data = {}) {
      this.titleMap = this.$t('user.verification-code.required111566110577154')
      this.disabled = false;
      this.mode = mode
      this.visible = true
      const { data: dataList } = await authorityDropDown({types:1});
      this.List = dataList;
      console.log('List', dataList);
      if (mode == 1) {
        this.titleMap = this.$t('user.verification-code.required111566110577155')
        this.disabled = true;
        await this.$nextTick()
        this.form.setFieldsValue({
          YtAuthorityName: data.YtAuthorityName,
          YtAuthorityNameEn:data.YtAuthorityNameEn,
          YtAuthorityFunction: data.YtAuthorityFunction
        })
        this.Id = data.Id
      }
    },
    submit() {
      const {
        form: { validateFields },
      } = this
      const Id = this.Id
      this.loading = true
      validateFields(
        ['YtAuthorityName', 'YtAuthorityFunction', 'Id','YtAuthorityNameEn'],
        { force: true },
        async (err, values) => {
          if (!err) {
            try {
              const res =
                this.mode == 0
                  ? await authorityAdd({ ...values })
                  : await authorityUpState({ ...values, Id })
              this.$emit('succeed')
              console.log('res', res);
              this.$message.success(this.$t( 'user.verification-code.required111566110577308'))
              this.close()
            } catch (error) {
              this.$message.error(error)
              console.log(error);
            } finally {
              this.loading = false
            }
          } else {
            setTimeout(() => {
              this.loading = false
            }, 600)
          }
        }
      )
    },
    close() {
      this.visible = false
      this.form.resetFields()
    },
  },
}
</script>
<style lang="less" scoped>
.shadow {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
</style>